<%--
  Created by IntelliJ IDEA.
  User: UP
  Date: 2024/7/25
  Time: 14:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<html>
<style>

</style>
<head>
    <title>用户界面</title>
</head>
<style>
    #box {
        width: 50%;
        margin: 50px auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    input[type="text"] {
        width: 100%;
        padding: 8px;
        margin-top: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    select {
        width: 100%;
        padding: 8px;
        margin-top: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    button {
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    button:hover {
        background-color: #0056b3;
    }
</style>
<body>
<div id="box">
    <input type="hidden" id="customerId" value="${sessionScope.get("customerInfo").id}">
    <div>
        用户名：${sessionScope.get("customerInfo").userName}
    </div>
    <div>
        用户余额：<input type="text" id="balance" readonly>
    </div>
    <div>
        银行卡：
        <select id="card">
        </select>
    </div>
    <div>
        提现金额：
        <input type="text" id="money" placeholder="请输入要提现的金额">
    </div>
    <div>
        <button onclick="remove()">确认提现</button>
    </div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script>
    $(function () {
        let customerId = $("#customerId").val();

        getBalance(customerId);
        getCards(customerId);
    })


    function getBalance(customerId) {
        $.ajax({
            url: "${contextPath}/customer_account/getBalanceByCustomerId",
            method: "get",
            data: {
                customerId: customerId,
            },
            dataType: "json",
            success(res) {
                if (res.code === 0) {
                    document.getElementById("balance").value = res.data.balance;
                }
            }

        })
    }

    function getCards(customerId) {
        $.ajax({
            url: "${contextPath}/customer_bank_card/getCardListByCustomerId",
            method: "get",
            data: {
                customerId: customerId,
            },
            dataType: "json",
            success(res) {
                if (res.code === 0) {
                    let cardEL = document.getElementById("card");
                    let cardList = res.data;
                    for (let card of cardList) {
                        let optionEl = document.createElement("option");
                        optionEl.value = card.id;
                        optionEl.innerHTML = card.bankName + `尾号` + card.cardNo.substring(12);
                        cardEL.appendChild(optionEl);
                    }
                }
            }
        })
    }

    function remove() {
        let accountId = $("#customerId").val();
        let beforeBalance = $("#balance").val();
        let money = $("#money").val();
        let cardId = $("#card").val();

        $.ajax({
            url: "${contextPath}/customer/add",
            method: "post",
            data: {
                accountId,
                beforeBalance,
                money,
                cardId
            },
            dataType: "json",
            success(res) {
                if (res.code === 0) {
                    alert("提交成功");
                    location.reload();
                }
            }
        })


    }

</script>
</html>


